<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>添加专家</title>
	<link rel="stylesheet" href="../layui/css/layui.css"/>
	<style type="text/css">
		.addexpert-con{
			padding:10px 15px 15px 15px;
			margin-bottom: 40px;
		}
		.addexpert-con .top-inp{
			margin-left: 20px;
		}
		.addexpert-con .from-con{
			margin: auto;
			background-color: #E2E2E2;
			padding: 10px;
			overflow: hidden;
		}
		.addexpert-con .from-con .layui-form-item{
			margin:20px 0 ;
		}
		.addexpert-con .not_border_left {
			border-left: none !important;
		}
		.addexpert-con .layui-form-item .layui-input-block .required {
			color: #ffb800; 
			font-size: 32px; 
			float: left; 
			margin-left: 5px; 
			margin-top: 5px;
			position: absolute;
			right: -15px;
		}
		.addexpert-con .layui-form-select dl dd.layui-this{
			background-color: #1E9FFF !important;
		}
		 .addexpert-con .layui-btn{
			background-color: #1E9FFF !important;
		}
		.addexpert-con .layui-form-select dl{
			max-height:230px !important;
		}
		.addexpert-con .layui-row .layui-col-xs4{
			text-align: center;
		}
		.addexpert-con .layui-row .layui-col-xs4 .layui-upload-img{
			width: 200px;
			height: 150px;
			border: 1px solid #e6e6e6;
			background-color: #FFFFFF;
		}
	</style>
</head>
<body>
	<div class="addexpert-con">
		<div class="from-con">
			<div style="width: 90%;">
			<form class="layui-form" action="" id="addExpert">
				<div class="layui-row">
					<div class="layui-col-xs8">
					  	<div class="layui-form-item" style="margin-top: 10px;">
						    <label class="layui-form-label">姓名</label>
						    <div class="layui-input-block">
						      <input id="realname" type="text" style="float: left;position: relative;" name="realname" lay-verify="required" placeholder="请输入专家姓名" class="layui-input" autocomplete="off">
						      <i class="required">*</i>
						    </div>
					  	</div>
					  	<div class="layui-form-item">
						    <label class="layui-form-label">性别</label>
						    <div class="layui-input-block">
						      <input type="radio" name="sex" value="男" title="男" checked>
						      <input type="radio" name="sex" value="女" title="女">
						    </div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">电话</label>
						    <div class="layui-input-block">
						    	<input id="phone" name="phone" type="tel" style="float: left;position: relative;" class="layui-input" placeholder="请输入联系电话" lay-verify="required|phone" autocomplete="off">
						    	<i class="required">*</i>
						    </div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">QQ</label>
						    <div class="layui-input-block">
						    	<input id="qq" name="qq" type="text" class="layui-input" placeholder="请输入QQ号" autocomplete="off">
						    </div>
						</div>
				  	</div>
			    	<div class="layui-col-xs4">
					  	<div class="layui-upload">
						  <div class="layui-upload-list">
						     <img class="layui-upload-img" id="demo1">
						     <p id="demoText"></p>
						     <input type="text" id="inpphotoid" style="display:none">
						  </div>
						  <button type="button" class="layui-btn" id="picture">上传专家图片</button>
						</div> 
					</div>
			    </div>
			    <div class="layui-row">
				    <div class="layui-col-xs12">
						<div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">专家描述</label>
						    <div class="layui-input-block">
						      <textarea  id="description" name="description" placeholder="请输入专家描述" class="layui-textarea"></textarea>
						    </div>
						 </div>
					</div>
				</div>
			  	<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button type="button" id="addExpert" lay-submit="" lay-filter="addExpert" class="layui-btn" style="float: right;">保  存 </button>
				    </div>
			  	</div>
			</form>
			</div>
		</div>
	</div>
	<script src="../js/jquery-3.3.1.js"></script>
	<script src="../layui/layui.all.js"></script>
	<script type="text/javascript">
		layui.use(['upload','form','laydate'], function(){
			var form = layui.form;
			var laydate = layui.laydate;
			var $ = layui.jquery
  			,upload = layui.upload;
  			
  			//普通图片上传
			var uploadInst = upload.render({
			    elem: '#picture',
			    size: 200,
			    url: '../fileuploadservlet.do',
			    before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); 
			        
			      });
			    },done: function(res){
			      //上传成功
			      if(res.code > 0){
			      	$("#inpphotoid").val(res.result1);
			      	layer.alert('文件上传成功！',{icon:1});
			        return ;
			      }else{
			      	layer.alert('文件上传成功！',{icon:2});
			        return ;
			      }
			      
			    }
			});
			
			//通过表单验证之后才会执行
			form.on('submit(addExpert)', function(teadata){
				var realname=$("#realname").val();
				var sex=$("input[name='sex']:checked").val()
				var phone=$("#phone").val();
				var qq=$("#qq").val();
				var photoid=$("#inpphotoid").val();
				var descripe=$("#description").val();
				if(photoid==null || photoid=="" || photoid=='null' || photoid==undefined){
					layer.msg("请上传照片！");
					return ;
				}
				$.ajax({
					url: '../sysexpertmanage/addexpert',  
			        type: 'get', 
			        dataType: 'json',  
			        data:{realname:realname,sex:sex,phone:phone,
			        	describe:descripe,photoid:photoid,QQ:qq},
			        success: function (getdata) {
			          if (getdata.code == 10001) {
			        	  layer.confirm(getdata.msg, {
							  btn: ['确定'],
							  icon:1
						  }, function(){
							  window.location.reload();
						  });
			          }else { 
			        	  layer.alert(getdata.msg, {icon: 2});
			        	  return false;
			          }  
			        },
			        error:function(){ 
			        	layer.alert('专家信息添加失败！', {icon: 2});
			        }
				});
			    
			});
		});
	</script>
</body>
</html>